<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>客户</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
</head>
<style>
    /* screening */
    .screening {
        width: 100%;
        overflow: hidden;
        background: #fff;
        position: relative;
        z-index: 4;
    }

    .screening > ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        border-bottom: solid 1px #ececec;
        overflow: hidden;
    }

    .screening > ul > li {
        float: left;
        width: 33%;
        text-align: center;
        line-height: 3rem;
        border-left: solid 1px #ececec;
        background: url("../assets/images/icons/on_1.png") no-repeat 85% center;
        font-size: 1rem;

    }

    /* grade */
    .grade-eject, .Category-eject, .Sort-eject {
        position: fixed;
        top: -65%;
        width: 100%;
        height: 65%;
        z-index: 1;
        -webkit-transition-duration: 0.4s;
    }

    .grade-eject > ul, .Category-eject > ul, .Sort-eject > ul {
        margin: 0;
        padding: 0;
        overflow: auto;
        height: 100%;
        width: 100%;
        -webkit-transition-duration: 0.4s;
    }

    .grade-eject > ul > li, .Category-eject > ul > li, .Sort-eject > ul > li {
        line-height: 3rem;
        font-size: 0.12rem;
        padding-left: 1rem;

    }

    .grade-eject > ul.grade-w, .Category-eject > ul.Category-w {
        background: #fff;
        position: absolute;
        z-index: 1;
        padding: 15px 5px 10px 15px;
    }

    .grade-eject > ul.grade-t, .Category-eject > ul.Category-t {
        background: #fff;
        position: absolute;
        z-index: 2;
        left: 100%;
    }

    .grade-eject > ul.grade-t > li, .Category-eject > ul.Category-t > li {
        border-bottom: solid 1px #fff;
    }

    .grade-eject > ul.grade-s, .Category-eject > ul.Category-s {
        background: #fff;
        position: absolute;
        z-index: 3;
        left: 100%;
        list-style-type: none;
    }

    .grade-eject > ul.grade-s > li, .Category-eject > ul.Category-s > li {
        border-bottom: solid 1px #eee;
        margin-left: 1rem;
        padding: 0;
    }

    .grade-w-roll {
        top: 85px;
    }

    .grade-w-roll::after {
        position: fixed;
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(0, 0, 0, 0.2);
        top: 0;
    }

    /*Sort-eject*/
    .Sort-Sort {
        background: #fff;
        position: absolute;
        z-index: 3;
        left: 0;
        list-style-type: none;
    }

    .Sort-Sort > li {
        border-bottom: solid 1px #eee;
        padding: 0;
    }

    .Sort-height {
        height: 343px;
    }

    /* demo-content */
    .demo-content {
        padding-top: 3rem;
    }

    .Sort-eject > ul > li.padding-left0 {
        padding-left: 0px;
    }


</style>
<body class="bg-gray">
<!--<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        客户
    </h1>


</header>-->
<div id="mycustom" v-cloak>
    <section class="" id="amz-main" data-tag="css-nav">


        <!-- screening -->
       <!-- <div class="screening">
            <ul>
                <li class="Regional" v-on:click="Regionalclick">预计成交率</li>
                <li class="Brand" v-on:click="Brandclick">标签</li>
                <li class="Sort" v-on:click="Sortclick">搜索</li>
            </ul>
        </div>-->
        <!-- End screening -->
        <!-- grade -->
        <div class="grade-eject">

            <ul class="am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-thumbnails tag-ulcont grade-w" id="gradew">
                <li v-on:click="gradewli(1)"><a class="select-bg">预计成交率</a></li>
                <li v-on:click="gradewli(2)"><a class="">最后跟进时间</a></li>
                <li v-on:click="gradewli(3)"><a class="">最后活动时间</a></li>
                <li v-on:click="gradewli(4)"><a class="">工作交接</a></li>
                <li v-on:click="gradewli(5)"><a class="">扫码</a></li>
                <li v-on:click="gradewli(6)"><a class="">转发</a></li>
            </ul>
        </div>
        <!-- End grade -->
        <!-- Category -->
        <div class="Category-eject">
            <ul class="Category-w" id="Categorytw">
                <li v-on:click="Categorywli" class="font-color-main"><i class="am-icon-plus padding-right10 "></i>新增标签
                </li>
            </ul>
            <ul class="Category-t" id="Categoryt">
                <li class="bg-gray">标签名字</li>
                <li>设置标签名</li>
                <li class="bg-gray">标签成员(0)</li>
                <li class="font-color-main"><i class="am-icon-plus padding-right10 "></i>添加成员</li>
            </ul>
        </div>
        <!-- End Category -->
        <!-- Category -->
        <div class="Sort-eject Sort-height">
            <ul class="Sort-Sort" id="Sort-Sort">
                <li class="padding-left0">
                    <div class="am-padding-bottom-sm bg-gray am-padding-top-sm am-padding-left-sm am-padding-right-sm box">
                        <div class="search-1 box-1">
                            <input class="font-14" type="search" id="txtsearch" placeholder="搜索用户" v-model="username" >
                        </div>
                        <div class="icon-search am-margin-left-sm" v-on:click="search()"></div>
                    </div>

                </li>
            </ul>


        </div>
        <div v-for="mycustom in mycustoms">


            <div v-on:click="customInfo(mycustom.id)" class="box bg-white am-padding-left-sm am-margin-top-sm am-padding-top-sm am-padding-bottom-sm am-border-bottom">

                <div class="width-60px">
                    <img class="am-img-responsive" v-bind:src="mycustom.head_icon">
                </div>
                <div class="box-1 am-margin-left-sm">
                    <div class="font-color-2 am-margin-top-xs font-18">{{mycustom.nick_name}}</div>
                    <div class="font-color-1 font-14">{{timestampToTime(mycustom.last_action_time)}}查看了你的名片</div>
                </div>
                <div class=" am-margin-right-sm am-padding-left-sm am-padding-right-sm am-padding-top-xs">
                    <div class="box">

                        <div class=" font-14 am-margin-left-xs"><!--预计成交率<span class="am-color-blue">20％</span>--></div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <footer data-am-widget="navbar" class="am-navbar am-cf am-navbar-default ">
        <ul class="am-navbar-nav am-cf am-avg-sm-4">
            <li v-on:click="radar()">
                <a>
                    <img src="../assets/images/icons/radar.png"
                         alt="首页"/>
                    <span class="am-navbar-label">雷达</span>
                </a>
            </li>
            <li>
                <a v-on:click="message()" class="">
                    <img src="../assets/images/icons/news.png"
                         alt="商品"/>
                    <span class="am-navbar-label">消息</span>
                </a>
            </li>

            <li>
                <a href="javascript:void(0)" onclick="location.reload()" class="selected">
                    <img src="../assets/images/icons/user-on.png"
                         alt="推广助手"/>
                    <span class="am-navbar-label">客户</span>
                </a>
            </li>
            <li v-on:click="my()">
                <a class="">
                    <img src="../assets/images/icons/me.png"
                         alt="个人中心"/>
                    <span class="am-navbar-label">我的</span>
                </a>
            </li>
        </ul>
    </footer>
</div>


<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/vue2.2.2.min.js"></script>
<script src="../assets/js/md5.js"></script>
<script src="../assets/common.js"></script>

<link rel="stylesheet" href="../assets/js/layui/css/layui.css">
<script type='text/javascript' src='../assets/js/layui/layui.js'></script>
<script>

    $(function () {

        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            getCustomByType(data);
        },200)

    });
    var vues;
    var userlist;
    var sessionid = getQueryString("sessionid");
    var islast=0;
    var recount=0;
    var totalpage;
    var data = {
        "page_num": 1,
        "page_size": 10,
        "type": 4,
        "staff_id": ''
    }

    var mask;
    layui.use('layer', function(){
        var layer = layui.layer;
    });

    window.onscroll = function () {
        if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
            nextPage();
        }

        if (getScrollTop() == 0) {
            reloadPage();
        }
    };

    function nextPage() {
        if (totalpage<=1){
            return;
        }
        if(islast==1){
            mask = layer.msg('最后一页了');
            setTimeout(function(){
                layer.close(mask);
            },2000)
            return;//最后一页了
        }
        data.page_num++;
        mask = layer.msg('正在加载下一页', {icon: 16});
        $.ajax({
            url: baseUrl+'v3.0/user/list',
            type: 'POST',
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            data: JSON.stringify(data),
            success:function(result){
               if(result.total_num<result.page_size*result.page_num)
                {
                    islast=1;
                }
                for(var i in result.data_list)
                {
                    vues.mycustoms.push(result.data_list[i]);
                }
                layer.close(mask);
            }
        })
    }

    function reloadPage(){
        if (totalpage<=1){
            return;
        }
        recount++;
        if(recount==1){
            data.page_num=1;
            mask = layer.msg('刷新中', {icon: 16});
            $.ajax({
                url: baseUrl+'v3.0/user/list',
                type: 'POST',
                contentType: 'application/json',
                headers: {'session_id': sessionid},
                data: JSON.stringify(data),
                success:function(result){

                    vues.mycustoms=result.data_list;
                    layer.close(mask);
                    setTimeout(function () {
                        recount=0;
                        islast=0;
                    },1000)
                }
            })
        }

    }

    //初次获取数据并注册vue
    function getCustomByType(data) {
        var uuid=randomString();
        var sign = hex_md5(JSON.stringify(data)+sessionid+uuid+"-keji").toUpperCase();
        console.log(JSON.stringify(data)+sessionid+uuid+"-keji");
        $.ajax({
            url: baseUrl+'v3.0/user/list',
            type: 'POST',
            contentType: 'application/json',
            headers: {'session_id': sessionid,"uuid":uuid,"sign":sign},
            data: JSON.stringify(data),
            success: function (result) {
                layer.close(mask);
                totalpage=result.total_num/result.page_size
                userlist=result.data_list;
                vues=new Vue({
                    el: "#mycustom",
                    data: {
                        mycustoms: result.data_list,
                        username:""
                    },
                    methods: {
                        customInfo:function(id){
                            window.location.href = '客户详情.html?sessionid='+sessionid+'&userid=' + id;
                        },
                        timestampToTime:function(stamp){
                            var date = new Date(stamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                            //Y = date.getFullYear() + '-';
                            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                            D = date.getDate() < 10 ? '0'+date.getDate():date.getDate();
                            h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours()) + ':';
                            m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes())  + ':';
                            s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
                            return M+D+' '+h+m+s;
                        },
                        my: function () {//我的
                            window.location.href = '我的.html?sessionid=' + sessionid
                        },
                        radar: function () {//雷达
                            window.location.href = '../aiRadar.html?sessionid=' + sessionid
                        },
                        message:function(){
                            window.location.href = '消息.html?sessionid=' + sessionid
                        },
                        Regionalclick: function () {//预计成交率
                            if ($('.grade-eject').hasClass('grade-w-roll')) {
                                $('.grade-eject').removeClass('grade-w-roll');
                            } else {
                                $('.grade-eject').addClass('grade-w-roll');
                            }
                        },
                        gradewli: function (type) {//预计成交率 最后跟进事件。。。
                            data.type = type;
                            $(".grade-t").css("left", "0%");
                            this.getData(data);
                        },
                        getData: function (d) {//重新获取数据
                            var that=this;
                            $.ajax({
                                url: baseUrl+'v3.0/user/list',
                                headers: {'session_id': sessionid},
                                type: 'POST',
                                contentType: 'application/json',
                                async: false,
                                data: JSON.stringify(d),
                                success: function (result) {
                                    userlist=result.data_list;
                                    that.Regionalclick();
                                    that.mycustoms=result.data_list
                                }
                            })
                        },
                        Categorywli:function(){//新增标签
                            $(".Category-t").css("left","0%")
                        },
                        Brandclick: function () {//标签
                            if ($('.Category-eject').hasClass('grade-w-roll')) {
                                $('.Category-eject').removeClass('grade-w-roll');
                            } else {
                                $('.Category-eject').addClass('grade-w-roll');
                            }
                        },
                        Sortclick:function(){//搜索
                            if ($('.Sort-eject').hasClass('grade-w-roll')) {
                                $('.Sort-eject').removeClass('grade-w-roll');
                            } else {
                                $('.Sort-eject').addClass('grade-w-roll');
                            }
                        },
                        search:function(){
                            if (this.username==''){
                                return;
                            }
                            var searchResult=[];
                            for (var i in userlist){
                                if(userlist[i].nick_name.indexOf(this.username)>=0)
                                {

                                    searchResult.push(userlist[i])
                                }
                            }
                            alert('查到'+searchResult.length+'条记录')
                        }
                        /*gradetli: function () {

                         $(".grade-s").css("left", "66.96%")
                         }*/
                    }

                })
            }
        })
    }

    //滚动条在Y轴上的滚动距离
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {
        var scrollHeight = 0,
            bodyScrollHeight = 0,
            documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
</script>
<script>

    //Regional开始
    /*    $(document).ready(function () {
     $(".Regional").click(function () {
     if ($('.grade-eject').hasClass('grade-w-roll')) {
     $('.grade-eject').removeClass('grade-w-roll');
     } else {
     $('.grade-eject').addClass('grade-w-roll');
     }
     });
     });*/

    /*    $(document).ready(function () {
     $(".grade-w>li").click(function () {
     $(".grade-t")
     .css("left", "0%")
     });
     });*/

    $(document).ready(function () {
        $(".grade-t>li").click(function () {
            $(".grade-s")
                .css("left", "66.96%")
        });
    });

    //Brand开始

    /*    $(document).ready(function () {
     $(".Brand").click(function () {
     if ($('.Category-eject').hasClass('grade-w-roll')) {
     $('.Category-eject').removeClass('grade-w-roll');
     } else {
     $('.Category-eject').addClass('grade-w-roll');
     }
     });
     });*/

/*    $(document).ready(function () {
        $(".Category-w>li").click(function () {
            $(".Category-t")
                .css("left", "0%")
        });
    });*/

    $(document).ready(function () {
        $(".Category-t>li").click(function () {
            $(".Category-s")
                .css("left", "66.96%")
        });
    });

    //Sort开始

/*    $(document).ready(function () {
        $(".Sort").click(function () {
            if ($('.Sort-eject').hasClass('grade-w-roll')) {
                $('.Sort-eject').removeClass('grade-w-roll');
            } else {
                $('.Sort-eject').addClass('grade-w-roll');
            }
        });
    });*/


    //判断页面是否有弹出

    $(document).ready(function () {
        $(".Regional").click(function () {
            if ($('.Category-eject').hasClass('grade-w-roll')) {
                $('.Category-eject').removeClass('grade-w-roll');
            }
            ;
        });
    });
    $(document).ready(function () {
        $(".Regional").click(function () {
            if ($('.Sort-eject').hasClass('grade-w-roll')) {
                $('.Sort-eject').removeClass('grade-w-roll');
            }
            ;
        });
    });
    $(document).ready(function () {
        $(".Brand").click(function () {
            if ($('.Sort-eject').hasClass('grade-w-roll')) {
                $('.Sort-eject').removeClass('grade-w-roll');
            }
            ;
        });
    });
    $(document).ready(function () {
        $(".Brand").click(function () {
            if ($('.grade-eject').hasClass('grade-w-roll')) {
                $('.grade-eject').removeClass('grade-w-roll');
            }
            ;
        });
    });
    $(document).ready(function () {
        $(".Sort").click(function () {
            if ($('.Category-eject').hasClass('grade-w-roll')) {
                $('.Category-eject').removeClass('grade-w-roll');
            }
            ;
        });
    });
    $(document).ready(function () {
        $(".Sort").click(function () {
            if ($('.grade-eject').hasClass('grade-w-roll')) {
                $('.grade-eject').removeClass('grade-w-roll');
            }
            ;

        });
    });


    //js点击事件监听开始
    function grade1(wbj) {
        var arr = document.getElementById("gradew").getElementsByTagName("li");
        for (var i = 0; i < arr.length; i++) {
            var a = arr[i];
            a.style.background = "";
        }
        ;
        wbj.style.background = "#eee"
    }

    function gradet(tbj) {
        var arr = document.getElementById("gradet").getElementsByTagName("li");
        for (var i = 0; i < arr.length; i++) {
            var a = arr[i];
            a.style.background = "";
        }
        ;
        tbj.style.background = "#fff"
    }

    function grades(sbj) {
        var arr = document.getElementById("grades").getElementsByTagName("li");
        for (var i = 0; i < arr.length; i++) {
            var a = arr[i];
            a.style.borderBottom = "";
        }
        ;
        sbj.style.borderBottom = "solid 1px #ff7c08"
    }

    function Categorytw(wbj) {
        var arr = document.getElementById("Categorytw").getElementsByTagName("li");
        for (var i = 0; i < arr.length; i++) {
            var a = arr[i];
            a.style.background = "";
        }
        ;
        wbj.style.background = "#eee"
    }

    function Categoryt(tbj) {
        var arr = document.getElementById("Categoryt").getElementsByTagName("li");
        for (var i = 0; i < arr.length; i++) {
            var a = arr[i];
            a.style.background = "";
        }
        ;
        tbj.style.background = "#fff"
    }

    function Categorys(sbj) {
        var arr = document.getElementById("Categorys").getElementsByTagName("li");
        for (var i = 0; i < arr.length; i++) {
            var a = arr[i];
            a.style.borderBottom = "";
        }
        ;
        sbj.style.borderBottom = "solid 1px #ff7c08"
    }

    function Sorts(sbj) {
        var arr = document.getElementById("Sort-Sort").getElementsByTagName("li");
        for (var i = 0; i < arr.length; i++) {
            var a = arr[i];
            a.style.borderBottom = "";
        }
        ;
        sbj.style.borderBottom = "solid 1px #ff7c08"
    }

    //滚动条在Y轴上的滚动距离
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {
        var scrollHeight = 0,
            bodyScrollHeight = 0,
            documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }



</script>


</body>
</html>